<template>
  <view class="course-container">
    <view class="header">
      <text class="title">课程管理</text>
      <text class="subtitle">欢迎，{{ userInfo.username }}老师</text>
    </view>

    <view class="tab-bar">
      <view 
        v-for="tab in tabs" 
        :key="tab.value"
        :class="['tab-item', { active: activeTab === tab.value }]"
        @click="activeTab = tab.value"
      >
        {{ tab.label }}
      </view>
    </view>

    <view class="content">
      <!-- 我的课程 -->
      <view v-if="activeTab === 'myCourses'" class="tab-content">
        <view class="course-list">
          <view 
            v-for="course in myCourses" 
            :key="course.courseId"
            class="course-card"
          >
            <view class="course-header">
              <text class="course-name">{{ course.courseName }}</text>
              <text class="course-classroom">{{ course.classroom }}</text>
            </view>
            
            <view class="course-info">
              <text class="info-item">时间: 周{{ ['一','二','三','四','五','六','日'][course.weekday-1] }} {{ course.startTime }}-{{ course.endTime }}</text>
              <text class="info-item">学生人数: {{ course.studentCount || 45 }}人</text>
            </view>
            
            <view class="course-actions">
              <button class="btn primary" @click="startCheckin(course)">发起签到</button>
              <button class="btn secondary" @click="viewCourseDetail(course)">详情</button>
            </view>
          </view>
        </view>
      </view>

      <!-- 课程表 -->
      <view v-else-if="activeTab === 'schedule'" class="tab-content">
        <view class="schedule-view">
          <view class="week-selector">
            <text class="week-label">第{{ currentWeek }}周</text>
            <picker @change="onWeekChange" :value="weekIndex" :range="weekRange">
              <button size="mini">选择周次</button>
            </picker>
          </view>

          <view class="teacher-schedule">
            <!-- 教师课表实现，类似学生课表但功能更丰富 -->
            <text>教师课表视图（开发中）</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 发起签到弹窗 -->
    <uni-popup ref="checkinPopup" type="center">
      <view class="checkin-dialog" v-if="selectedCourse">
        <text class="dialog-title">发起签到 - {{ selectedCourse.courseName }}</text>
        
        <view class="form-item">
          <text class="label">签到有效时间</text>
          <picker 
            :value="checkinTimeIndex" 
            :range="checkinTimes" 
            @change="onCheckinTimeChange"
            class="time-picker"
          >
            <view class="picker-value">{{ checkinTimes[checkinTimeIndex] }}</view>
          </picker>
        </view>
        
        <view class="qr-code-section" v-if="qrCodeUrl">
          <text class="section-title">签到二维码</text>
          <image :src="qrCodeUrl" class="qr-code" />
          <text class="session-id">签到码: {{ currentSessionId }}</text>
        </view>
        
        <view class="dialog-actions">
          <button class="btn cancel" @click="cancelCheckin">取消</button>
          <button class="btn confirm" @click="generateCheckin">生成二维码</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { api } from '@/utils/request.js'

export default {
  data() {
    return {
      userInfo: {},
      activeTab: 'myCourses',
      tabs: [
        { label: '我的课程', value: 'myCourses' },
        { label: '课程表', value: 'schedule' }
      ],
      myCourses: [],
      selectedCourse: null,
      currentWeek: 1,
      weekIndex: 0,
      weekRange: Array.from({length: 20}, (_, i) => `第${i+1}周`),
      checkinTimeIndex: 1, // 默认10分钟
      checkinTimes: ['5分钟', '10分钟', '15分钟', '20分钟'],
      qrCodeUrl: '',
      currentSessionId: ''
    }
  },
  
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo') || {}
    this.loadMyCourses()
  },
  
  methods: {
    async loadMyCourses() {
      try {
        // 模拟获取教师课程数据
        this.myCourses = [
          {
            courseId: 'C001',
            courseName: 'Web前端开发',
            classroom: 'A101',
            weekday: 1,
            startTime: '08:00',
            endTime: '09:40',
            studentCount: 45
          },
          {
            courseId: 'C002',
            courseName: '数据库原理',
            classroom: 'B201',
            weekday: 3,
            startTime: '10:00',
            endTime: '11:40',
            studentCount: 38
          }
        ]
      } catch (error) {
        console.error('加载课程失败:', error)
      }
    },
    
    startCheckin(course) {
      this.selectedCourse = course
      this.qrCodeUrl = ''
      this.currentSessionId = ''
      this.$refs.checkinPopup.open()
    },
    
    async generateCheckin() {
      try {
        const validTime = parseInt(this.checkinTimes[this.checkinTimeIndex]) 
        
        const res = await api.createCheckinSession({
          courseId: this.selectedCourse.courseId,
          validTime: validTime
        })
        
        if (res.code === 200) {
          this.currentSessionId = res.data.sessionId
          this.qrCodeUrl = res.data.qrcodeUrl
          
          uni.showToast({ title: '签到已创建', icon: 'success' })
        }
      } catch (error) {
        uni.showToast({ title: '创建签到失败', icon: 'none' })
      }
    },
    
    cancelCheckin() {
      this.$refs.checkinPopup.close()
      this.selectedCourse = null
      this.qrCodeUrl = ''
    },
    
    viewCourseDetail(course) {
      uni.navigateTo({
        url: `/pages/teacher/course-detail/course-detail?courseId=${course.courseId}`
      })
    },
    
    onWeekChange(e) {
      this.weekIndex = e.detail.value
      this.currentWeek = this.weekIndex + 1
      // 加载对应周次的课表
    },
    
    onCheckinTimeChange(e) {
      this.checkinTimeIndex = e.detail.value
    }
  }
}
</script>

<style scoped>
.course-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: white;
  padding: 40rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 24rpx;
  color: #666;
}

.tab-bar {
  display: flex;
  background: white;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 30rpx;
  font-size: 28rpx;
  color: #666;
  border-bottom: 4rpx solid transparent;
  transition: all 0.3s;
}

.tab-item.active {
  color: #667eea;
  border-bottom-color: #667eea;
  font-weight: bold;
}

.content {
  padding: 30rpx;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.course-card {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.course-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.course-classroom {
  font-size: 24rpx;
  color: #667eea;
  background: #f0f4ff;
  padding: 8rpx 16rpx;
  border-radius: 15rpx;
}

.course-info {
  margin-bottom: 30rpx;
}

.info-item {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.course-actions {
  display: flex;
  gap: 15rpx;
}

.btn {
  flex: 1;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 24rpx;
}

.primary {
  background: #667eea;
  color: white;
}

.secondary {
  background: #f5f5f5;
  color: #666;
}

.week-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 30rpx;
  border-radius: 15rpx;
  margin-bottom: 30rpx;
}

.week-label {
  font-size: 28rpx;
  font-weight: bold;
}

.teacher-schedule {
  background: white;
  border-radius: 15rpx;
  padding: 60rpx;
  text-align: center;
  color: #999;
}

.checkin-dialog {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;
}

.dialog-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.time-picker {
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 20rpx;
}

.picker-value {
  text-align: center;
  color: #333;
}

.qr-code-section {
  text-align: center;
  margin: 30rpx 0;
}

.section-title {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.qr-code {
  width: 300rpx;
  height: 300rpx;
  margin: 0 auto 20rpx;
}

.session-id {
  font-size: 22rpx;
  color: #999;
  font-family: monospace;
}

.dialog-actions {
  display: flex;
  gap: 20rpx;
}

.btn.cancel {
  background: #f5f5f5;
  color: #666;
}

.btn.confirm {
  background: #667eea;
  color: white;
}
</style>